<template>
    <div>
        <el-table :data="list" style="width: 100%" stripe border>
            <el-table-column prop="vid" label="كىنو تەرتىپى">
                <template slot-scope="{row,$index}">
                    <p v-if="!row.edit" @dblclick="changeStatus(row,$index,true)">{{row.vid}}</p>
                    <el-input v-if="row.edit" v-model="row.vid" size="small" @keyup.enter.native="changeStatus(row,$index,false)"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="كىنو ئىسمى">
            </el-table-column>
            <el-table-column prop="videoUrl" label="كىنو ئادىرىسى" style="height:30px;">
                <template slot-scope="scope">
                    <a style="overflow: hidden;text-overflow: ellipsis; white-space: nowrap;" target="_blank" :href="scope.row.videoUrl">{{scope.row.videoUrl}}</a>
                    <el-button v-clipboard:copy="scope.row.videoUrl" v-clipboard:success="copySuccess" v-clipboard:error="copyError" size="small" round type="success">كۆچۈرۈش</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="coverImg" label="رەسىم ئادىرىسى">
                <template slot-scope="scope">
                    <el-image lazy :src="scope.row.coverImg"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="قاتقان ۋاقتى">
                <template slot-scope="scope">
                    <span>{{moment(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss')}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="تۈرى">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.sort" disabled placeholder="" v-if="scope.row.sort!=null">
                        <el-option v-for="item in sortList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="كىنو،تىياتېر">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.type" disabled placeholder="" v-if="scope.row.type!=null">
                        <el-option v-for="item in typeList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="VIP">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.isVip" disabled placeholder="" v-if="scope.row.isVip!=null">
                        <el-option v-for="item in isVipList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="isFree" label="ھەقسىز">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.isFree" disabled placeholder="" v-if="scope.row.isFree!=null">
                        <el-option v-for="item in isFreeList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="isNew" label="يېڭى">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.isNew" disabled placeholder="" v-if="scope.row.isNew!=null">
                        <el-option v-for="item in isNewList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="isTv" label="تىياتىر">
                </el-table-column> -->
            <el-table-column prop="price" label="باھاسى">
                <template slot-scope="scope">
                    {{scope.row.price?scope.row.price:0}}
                </template>
            </el-table-column>
            <!-- <el-table-column prop="v_xh" label="地址">
                </el-table-column> -->
            <el-table-column fixed="right" width="240px" label="باشقۇرۇش">
                <template slot-scope="{row}">
                    <el-button type="primary" size="small" :disabled="!row.edit">يېڭىلاش</el-button>
                    <el-button type="danger" size="small" @click="deleteVideo(row)">يۇيۇش</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" style="margin:25px 0;">
            <el-col :span="6">
            </el-col>
            <el-col :span="6">
                <el-input size="small" type="number" v-model="vid" placeholder=""></el-input>
            </el-col>
            <el-col :span="6" style="text-align:center;">
                <el-button type="primary" @click="addVideo" round>يېڭىنى قوشۇش</el-button>
            </el-col>
            <el-col :span="6"></el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            typeList: [
                { label: "كىنو", value: 0 },
                { label: "قىسىملىق", value: 1 }
            ],
            sortList: [
                { label: "كىنو", value: "MOVIE" },
                { label: "قىسىملىق", value: "TV" },
                { label: "قىسقا فىلىم", value: "SHORT" },
                { label: "كۈلدۈرگە", value: "FUN" },
                { label: "تور فىلىملىرى", value: "NETTV" },
                { label: "سەنئەت", value: "VARIETY" },
                { label: "كارتون", value: "CARTOON" },
                { label: "ئۆزتىل", value: "LOCAL" }
            ],
            isFreeList: [
                { label: "پۇللۇق", value: 1 },
                { label: "ھەقسىز", value: 0 }
            ],
            isNewList: [
                { label: "يېڭى", value: 1 },
                { label: "كونا", value: 0 }
            ],
            isVipList: [
                { label: "VIP", value: 1 },
                { label: "ھەقسىز", value: 0 }
            ],
            vid: null
        };
    },
    methods: {
        async getRecommend() {
            try {
                let res = await this.$http.get(`/getRecommend`);
                this.list = res.data.data.list;
            } catch (error) {}
        },
        copyError() {
            this.$message.error("مەغلۇپ بولدى");
        },
        copySuccess() {
            this.$message.success("كۆچۈرۈلدى");
        },
        moment,
        changeStatus(row, index, bol) {
            let list = this.list;
            list[index].edit = bol;
            this.list = list;
        },
        addVideo() {
            if (!this.vid) {
                this.$message.error("كىنو تەرتىپىنى كىرگۈزۈڭ");
                return;
            }
            this.$confirm("جەزملەشتۈرەمسىز?", "ئەسكەرتىش", {
                confirmButtonText: "ھەئە",
                cancelButtonText: "ياق",
                type: "warning"
            })
                .then(async () => {
                    try {
                        let res = await this.$http.get(
                            "/setRecommend?vid=" + Number(this.vid)
                        );
                        this.$message.success("مۇۋەپپەقىيەتلىك قېتىلدى");
                        this.vid = null;
                        this.getRecommend();
                    } catch (error) {}
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "ئەمەلدىن قالدۇرۇلدى"
                    });
                });
        },
        deleteVideo(info) {
            this.$confirm("جەزملەشتۈرەمسىز?", "ئەسكەرتىش", {
                confirmButtonText: "ھەئە",
                cancelButtonText: "ياق",
                type: "warning"
            })
                .then(async () => {
                    try {
                        let res = await this.$http.get(
                            "/deleteRecommend?vid=" + Number(info.vid)
                        );
                        this.$message.success("مۇۋەپپەقىيەتلىك يۇيۇلدى");
                        this.getRecommend();
                    } catch (error) {}
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "ئەمەلدىن قالدۇرۇلدى"
                    });
                });
        }
    },
    mounted() {
        this.getRecommend();
    }
};
</script>

<style lang="scss" scoped>
</style>